<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="支付账单号">
              <a-input v-model="queryParam.bill_code" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="缴费类型">
              <JSearchSelectTag dict="xy_park_bill_clear" v-model="queryParam.clear_status" />
            </a-form-item>
          </a-col>
          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="费项">
              <j-popup
                v-model="queryParam.costType"
                org-fields="cost_type,cost_name,tax_rate"
                dest-fields="costType,cost_name,tax_rate"
                field="costType"
                code="v_xy_park_cost_type"
              />
            </a-form-item>
          </a-col> -->
          <a-col :xl="6" :lg="7" :md="8" :sm="24" >
            <a-form-item>
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a href="javascript:;" @click="handlerCollapse">
                {{isCollapse? '展开':'收回'}}
                <a-icon :type="isCollapse? 'down':'up'"/>
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
      <vxe-grid
        id="AuditList"
        keep-source
        ref="vxeTable"
        :height="null"
        v-bind="options"
        :expand-config="{accordion: true}"
        :columns="columns"
        :data="dataSource"
        :edit-config="{trigger: 'click', mode: 'row',showStatus: true}"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @cell-dblclick="handleCellHblclick"
        @toggle-row-expand="toggleRowExpand"
      >
      <template v-slot:toolbar_buttons>
        <div class="table-operator">
          <!-- <a-button type="primary" icon="form" @click="handleAuto">自动匹配</a-button> -->
        </div>
      </template>
      <template v-slot:toolbar_tools>
        <vxe-button style="margin-right:12px;" @click="handleExportXls('勾稽')" icon="vxe-icon--download" circle></vxe-button>
      </template>
      <template #action="{ row }">
        <template>
          <a v-if="!row.checkAmount || row.checkAmount < row.amount" @click="handleEdit(row)">匹配</a>
        </template>
      </template>
      <template #content="{ row }">
        <div :style="{width:innerTableWidth}">
          <vxe-grid
            border
            resizable
            align="center"
            :columns="subCol"
            :data="subDataSource[row.bill_code] || []"
          >
          </vxe-grid>
        </div>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
  </a-card>
</template>

<script>

import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { getAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import { filterObj } from '@/utils/util'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import moment from 'moment'
export default {
  name: 'EWAuditListByOrder',
  mixins: [VxeTableMixin],
  components: {
    JSearchSelectTag
  },
  data() {
    return {
      columns: [
        { type: 'expand', width: 40, slots: { content: 'content' }},
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '账单编号', field: 'bill_code', showOverflow: true },
        { title: '结清状态', field: 'clear_status', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_bill_clear', row.clear_status)
        } }},
        { title: '费项编码', field: 'cost_type', showOverflow: true },
        { title: '费项名称', field: 'cost_name' },
        { title: '账单金额', field: 'bill_amount', showOverflow: true },
        { title: '仪表耗用', field: 'meter_diff', showOverflow: true },
        { title: '抄表记录编号', field: 'record_code', showOverflow: true },
        { title: '仪表编号', field: 'device_code', showOverflow: true },
        { title: '仪表分类', field: 'device_sort', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('v_xy_park_devicesort', row.device_sort)
        } }},
        { title: '匹配金额', field: 'matched_amout', showOverflow: true },
        { title: '未匹配金额', field: 'unmatched_amout', showOverflow: true, slots: { default: ({ row }) => {
          return row.matched_amout ? row.bill_amount - row.matched_amout : row.bill_amount
        } }},
        { title: '创建时间', field: 'create_time', showOverflow: true, slots: { default: ({ row }) => {
          return moment(row.create_time).format('YYYY-MM-DD hh:mm:ss')
        } }}
        // { title: '匹配人', field: 'd', showOverflow: true }
      ],
      subCol: [
        { type: 'seq', width: 40 },
        { title: '支付账单号', field: 'account_code', showOverflow: true },
        { title: '商户号', field: 'merchant_number', showOverflow: true },
        { title: '商户名称', field: 'merchant_name', showOverflow: true },
        { title: '码牌号码', field: 'code_card' },
        { title: '交易金额', field: 'amount', showOverflow: true },
        { title: '交易时间', field: 'trading_time', showOverflow: true },
        { title: '交易方式', field: 'trading_type', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_trading_type', row.trading_type)
        } }},
        { title: '交易状态', field: 'trading_status', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_trading_status', row.trading_status)
        } }},
        { title: '房源编号', field: 'listing_no', showOverflow: true },
        // { title: '仪表编号', field: 'device_code', showOverflow: true },
        { title: '缴费类型', field: 'payment_type', showOverflow: true, slots: { default: ({ row }) => {
          return filterDictTextByCache('xy_park_payment_type', row.payment_type)
        } }}
      ],
      dataSource: [],
      url: {
        list: '/custom/getMeterBill',
        edit: '/ledgerScore/ysLedgerScore/edit',
        billlist: '/custom/getFlowList'
      },
      disableMixinCreated: true,
      innerTableWidth: 600,
      subDataSource: {},
      isCollapse: true
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleEdit: function(record) {
      this.$refs.modalForm.edit(record)
    },
    toggleRowExpand({ row }) {
      getAction(this.url.billlist, { bill_code: row.bill_code }).then(res => {
        if (res.code) {
          this.$set(this.subDataSource, row.bill_code, res.result)
          this.subDataSource[row.bill_code] = res.result
        }
      })
    },
    handlerCollapse() {
      this.isCollapse = !this.isCollapse
    },
    getQueryParams() {
      const queryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (queryParam.trading_time) {
        queryParam.trading_time_begin = moment(queryParam.trading_time[0]).format('YYYY-MM-DD hh:mm:ss')
        queryParam.trading_time_end = moment(queryParam.trading_time[1]).format('YYYY-MM-DD hh:mm:ss')
        delete queryParam.trading_time
      }
      // 获取查询条件
      const sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.currentPage
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    }
  },
  created() {
    this.loadData(1)
  },
  mounted() {
    this.$nextTick(() => {
      // const columns = this.$refs.vxeTable.getColumnByField('action')
      const tableWidth = this.$refs.vxeTable.$el.clientWidth
      this.innerTableWidth = (tableWidth - 30) + 'px'
    })
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
